<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="shiro" uri="http://www.springside.org.cn/tags/shiro" %>    
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- 通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。
这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。
注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！ -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<%@ include file="/common/jsp/bootstrap.jsp" %>
<%@ include file="/common/jsp/page.jsp" %>
<%@ include file="/common/jsp/validator.jsp" %>

<title>登陆页面</title>
</head>
<body>
 <section>
    <section class="wrapper">
    	<h3><i class="fa fa-angle-right"></i>用户管理</h3>
    
    	
    	
    	<shiro:hasPermission name="user:addUser">
	    	<!-- 添加 -->
			<button type="button" id="addUserBtn" class="btn btn-success"  data-toggle="modal" data-target="#myModal">添加</button>
		</shiro:hasPermission>  
		<shiro:hasPermission name="user:userDel">
			<!-- 删除--> <!--data-toggle="modal" data-target="#myModal" -->
			<button type="button" id="updateUserBtn" class="btn btn-info">修改</button>
		</shiro:hasPermission>
		
		<shiro:hasPermission name="user:getUserInfo">
			<!-- 修改 -->
			<button type="button" id="delUserBtn" class="btn btn-warning">删除</button>
		</shiro:hasPermission>
		<!-- 是否锁定账号 -->
		<button type="button" id="lock" class="btn btn-danger">锁定</button>		
		<!-- 是否锁定账号 --> 
		<button type="button" id="unlock" class="btn btn-danger">解锁</button>		
		<!-- 设置权限 -->
		<button type="button" id="setUserRoleBtn"  class="btn btn-primary">设置角色</button>
    	<div class="row mt">
                  <div class="col-md-12">
                      <div class="content-panel">
                          <table class="table table-striped table-advance table-hover">
	                  	  	  <h4>
	                  	  	  	<i class="fa fa-angle-right"></i>
	                  	  	  </h4>
	                  	  	  <hr>
                              <thead>
                              <tr>
                              	  <th><input type="checkbox"/></th>
                                  <th>ID</th>
                                  <th class="hidden-phone">用户名</th>
                                  <th>用户邮箱</th> 
                                  <th>用户地址</th> 
                                  <th>真实姓名</th> 
                                  <th>用户类型</th>
                                  <th>用户角色</th>
                                  <th>用户电话号码</th>
                                  <th>用户状态</th>
                                  <th>操作</th>
                              </tr>
                              </thead>
                              <tbody>
	                              <c:forEach var="user" items="${users.list}">
		                              <tr>
		                              	  <td><input type="checkbox" value="${user.id}"/></td>
		                                  <td><a href="">${user.id}</a></td>      
		                                  <td class="hidden-phone">${user.userName}</td>
		                                  <td>${user.mail}</td>
		                                  <td>${user.address}</td>
		                                  <td>${user.realName}</td>
		                                  <td>${user.userType}</td>
		                                  <td>${user.roles}</td>
		                                  <td>${user.phone}</td>
		                                  <td>
		                                  	<c:choose>
		                                  		<c:when test="${user.isLock == 1 }">
		                                  			<span id="lock${user.id}" title="${user.isLock}" class="label label-warning label-mini">锁定</span>
		                                  		</c:when>
		                                  		<c:otherwise>
		                                  			<span id="lock${user.id}" title="${user.isLock}" class="label label-info label-mini">正常</span>
		                                  		</c:otherwise>
		                                  	</c:choose>
		                                  </td>
		                                  <td>
		                                      <button class="btn btn-success btn-xs">重置密码</button>
		                                      <button class="btn btn-primary btn-xs">删除</button>
		                                      <button title="${user.id}" class="btn btn-danger btn-xs userRoleBtn">设置用户角色</button> 
		                                  </td>
		                              </tr>
	                              </c:forEach>
                              </tbody>
                          </table>
						  <div>
						  	<ul id="callBackPager"></ul>
						  </div>		                          
                      </div>
                  </div>
              </div>
 	</section>
</section>

<!-- 模态框弹出页面 -->
<div>
	<div id="myModal" class="modal fade">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	        <h4 class="modal-title">添加用户</h4>
	      </div>
	      <div class="modal-body">
		      <form id="defaultForm" target="mainframe" method="post" class="form-horizontal" action="${ctx}/user/addUser.do">
		      	<input type="hidden" name="id" id="userId"/>
             	 <div class="form-group">
                      <label class="col-lg-3 control-label">用户名：</label>
                      <div class="col-lg-4">
                          <input type="text" class="form-control" name="userName" id="userName" placeholder="用户名" />
                      </div>
                  </div>
                  <div class="form-group">
                      <label class="col-lg-3 control-label">用户邮箱</label> 
                      <div class="col-lg-5">
                          <input type="text" class="form-control" name="mail" id="mail"/>
                      </div>
                  </div>

                  <div class="form-group">
                      <label class="col-lg-3 control-label"> 用户地址</label> 
                      <div class="col-lg-5">
                          <input type="text" class="form-control" name="address" id="address"/>
                      </div>
                  </div>

                  <div class="form-group">
                      <label class="col-lg-3 control-label"> 真实姓名</label>  
                      <div class="col-lg-5">
                          <input type="text" class="form-control" name="realName" id="realName"/>
                      </div>
                  </div>

                  <div class="form-group">
                      <label class="col-lg-3 control-label">用户类型</label>   
                      <div class="col-lg-5">
                          <select class="form-control" name="userType" id="userType">
                              <option value="">请选择</option>
                              <option value="1">用户</option>
                              <option value="2">商家</option>
                              <option value="3">系统管理员</option>
                          </select>
                      </div>
                  </div>

                  <div class="form-group">
                      <label class="col-lg-3 control-label">电话号码</label> 
                      <div class="col-lg-5">
                           <input type="tel" class="form-control" name="phone" id="phone"/>
                      </div>
                  </div>
<!--                   <div class="form-group">
                      <label class="col-lg-3 control-label">用户密码</label> 
                      <div class="col-lg-5">
                           <input type="tel" class="form-control" name="password" id="password"/>
                      </div>
                  </div>    
 -->                  
                  <div class="form-group">
                     <div class="col-lg-9 col-lg-offset-3">
                          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					      <button type="submit" class="btn btn-primary">保存</button>
					      <button type="button" class="btn btn-primary" id="resetBtn">重置</button>
                      </div>
                  </div>      
              </form>
	      </div>
	      <!-- <div class="modal-footer">
	        
	      </div> -->
	    </div>
	  </div>
	</div>
	
	
	<div id="alertMessage" class="modal fade">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	        <h4 class="modal-title">温馨提示</h4>
	      </div>
	      <div class="modal-body">
	      	<label id="message"></label>
	      </div>
	      <div class="modal-footer">
	          <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	      </div>
	    </div>
	  </div>
	</div>
	
	<!-- 模板删除弹出框 -->
	<div id="deleteUser" class="modal fade">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	        <h4 class="modal-title">确定删除选中的用户吗？</h4>
	      </div>
	      <div class="modal-footer">
		      <form id="deleteFrom" target="mainframe" style="display: none;" action="${ctx}/user/userDel.do" method="post">
				 <input type="hidden" id="ids" name="ids"/>
			  </form>
	          <button type="button" id="delOk" class="btn btn-default">确定</button>
	          <button type="button" class="btn btn-default" data-dismiss="modal" >取消</button>
	      </div>
	    </div>
	  </div>
	</div>
	
	
	<!-- 是否锁定用户 -->
	<div id="isLockUser" class="modal fade">
	  <div class="modal-dialog">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
	        <h4 class="modal-title" id="isLock">确定要锁定这个用户吗？</h4>
	      </div>
	      <div class="modal-footer">
		      <form id="deleteFrom" target="mainframe" style="display: none;" action="${ctx}/user/userDel.do" method="post">
				 <input type="hidden" id="ids" name="ids"/>
			  </form>
	          <button type="button" id="delOk" class="btn btn-default">确定</button>
	          <button type="button" class="btn btn-default" data-dismiss="modal" >取消</button>
	      </div>
	    </div>
	  </div>
	</div>
</div>
<!-- 分页组建 -->
<form id="userPageForm" target="mainframe" style="display: none;" action="${ctx}/user/userPage.do" method="post">
	<input type="hidden" id="currentPage" name="search_currentpage"/>
	<input type="hidden" id="pageSize" name="search_pageSize"/>
</form>

<!-- 用户角色修改查看框 -->
<div class="modal fade" id="userRoleModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">用户角色</h4>
      </div>
      <div class="modal-body">
        <select multiple id="userRole" style="height: 160px;" class="form-control">
		  
		</select>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" id="saveUserRole" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>

</body>
</html>
<script type="text/javascript">
	$(function(){
		
		//用户点击保存用户角色按钮
		$("#saveUserRole").click(function(){
			debugger;
			var userRole=$("#userRole").val();
			var realRoleId = "";
			if(userRole == ""){
				alert("您还未选择角色！");
				return;
			}else{
				for(var i = 0 ; i < userRole.length ; i++){
					if(realRoleId == ""){
						realRoleId = userRole[i];
					}else{
						realRoleId+= ","+userRole[i];
					}
				}
			}
			setUserRole(realRoleId);
			
		});
		
		//用户点击用户角色按钮
		$(".userRoleBtn").click(function(){
			var userId = $(this).attr("title");
			//获取用户拥有的角色
			getUserRole(userId);
		});
		
        $('#callBackPager').bootstrapPaginator({
        	bootstrapMajorVersion:3,
            currentPage: '${users.pageNum}',
            numberOfPages:"${users.pageSize}",
            totalPages:"${users.pages}",
            onPageClicked:function(event, originalEvent, type, page) 	{
            	$("#currentPage").val(page);
                $("#pageSize").val(10);
                $("#userPageForm").submit();
            }
        });

        $('#defaultForm').bootstrapValidator({
//          live: 'disabled',
          message: 'This value is not valid',
          feedbackIcons: {
              valid: 'glyphicon glyphicon-ok',
              invalid: 'glyphicon glyphicon-remove',
              validating: 'glyphicon glyphicon-refresh'
          },
          fields: { //     
        	  userName: { 
                  validators: {
                      notEmpty: {
                          message: '用户名不能为空'
                      },regexp: {
                          regexp: /^[a-zA-Z0-9_\.]+$/,
                          message: '用户名必须是字母、数字'
                      }
                  }
              },
              mail: {
                  validators: {
                	  notEmpty: {
                          message: '邮箱地址未填写'
                      },emailAddress: {
                          message: '请确定您的邮箱地址是否正确'
                      }
                  }
              },
              address: {
                  validators: {
                      notEmpty: {
                          message: '用户地址未填写'
                      },
                  }
              },
              realName: {
                  validators: {
                	  notEmpty: {
                          message: '用户真实姓名未填写'
                      }
                  }
              },
              phone: {
                  validators: {
                      notEmpty: {
                          message: '电话号码不能为空！'
                      },
                      regexp: { 
                          regexp: /^0{0,1}(13[0-9]|15[0-9]|153|156|18[0-9])[0-9]{8}$/,
                          message: '用户名必须是字母、数字'
                      }
                  }
              },
              userType: {
                  validators: {
                	  notEmpty: {
                          message: '用户类型为选择'
                      }
                  }
              }/* ,password: {
                  validators: {
                	  notEmpty: {
                          message: '用户密码不能为空'
                      }
                  }
              } */
          }
      });
        
	 /*  $('#saveUser').click(function() {//与提交按钮有相同的效果
		  debugger;
	     var rst = $('#defaultForm').bootstrapValidator('validate');
	  }); */

      $('#resetBtn').click(function() {//重置表单
         $('#defaultForm').data('bootstrapValidator').resetForm(true);
      });
	  
	  //用户点击添加按钮
	  $("#addUserBtn").click(function(){
		  //重置表单中的信息
		  $('#defaultForm').data('bootstrapValidator').resetForm(true);
	  });
	  
	  //用户点击修改按钮
	  $("#updateUserBtn").click(function(){
		  var checkboxs =$(".table").find("input[type=checkbox]:checked");
		  if(checkboxs.length != 1){
			  $("#message").html("请选择一项您需要修改的用户！");
			  $("#alertMessage").modal('show');
			  return;
		  }
		  //查询 用户信息
		  getUserInfo(checkboxs[0].value);
		  $("#myModal").modal('show');
	  });
	  
	  //用户点击删除按钮
	  $("#delUserBtn").click(function(){
		  var checkboxs = $(".table").find("input[type=checkbox]");
		  var isCheckedBox = "";
		  for(var i= 0 ; i < checkboxs.length ;i ++){
			  var checkbox = checkboxs[i];
			  if(checkbox.checked){//选中 的
				  if(isCheckedBox == ""){
					  isCheckedBox = checkbox.value;
				  }else{
					  isCheckedBox += ","+checkbox.value;
				  }
			  }
		  }
		  if(isCheckedBox == "" ){
		      $("#message").html("您还未选择需要删除的数据！");
		      $("#alertMessage").modal('show');
		      return;
	      }
		  $("#ids").val(isCheckedBox);
		  $("#deleteUser").modal('show');
		
	  });
	  
	  //删除确定按钮
	  $("#delOk").click(function(){
		  //和后台进行数据交互删除数据
		  $("#deleteFrom").submit();
	  });
	  
	  //用户点击锁定 lock 
	  $("#lock").click(function(){
		  var checkboxs = $(".table").find("input[type=checkbox]");
		  var isCheckedBox = "";
		  for(var i= 0 ; i < checkboxs.length ;i ++){
			  var checkbox = checkboxs[i];
			  if(checkbox.checked){//选中 的
				  if(isCheckedBox == ""){
					  isCheckedBox = checkbox.value;
				  }else{
					  isCheckedBox += ","+checkbox.value;
				  }
			  }
		  }
		  if(isCheckedBox == "" ){
		      $("#message").html("您还未选择需要锁定的数据！");
		      $("#alertMessage").modal('show');
		      return;
	      }
		  //判断被选中 的是否都是 未锁定
	  });
	  
	  //用户点击解锁
	  $("#unlock").click(function(){
		  var checkboxs = $(".table").find("input[type=checkbox]");
		  var isCheckedBox = "";
		  for(var i= 0 ; i < checkboxs.length ;i ++){
			  var checkbox = checkboxs[i];
			  if(checkbox.checked){//选中 的
				  if(isCheckedBox == ""){
					  isCheckedBox = checkbox.value;
				  }else{
					  isCheckedBox += ","+checkbox.value;
				  }
			  	 var title = $("#lock"+checkbox.value);
			  }
		  }
		  if(isCheckedBox == "" ){
		      $("#message").html("您还未选择需要解锁的数据！");
		      $("#alertMessage").modal('show');
		      return;
	      }
		  //判断被选中 的是否都是 被锁定
	  });
	  
});
	
	function setUserRole(realRoleId){
		debugger;
		$.ajax({
			url:"${ctx}/user/setUserRole.do",
			type:"post",
			data:{"realRoleId":realRoleId},
			aysnc:"false",
			success:function(data){
				var code = data.code;
				if(code == "200"){
					alert("操作成功！");
				}else{
					alert("操作失败！");
				}
				$("#userRoleModal").modal('close');
			}
		});
		
	}
	
	function getUserRole(userId){
		$.ajax({
			url:"${ctx}/user/getUserRole.do",
			type:"post",
			data:{"userId":userId},
			aysnc:"false",
			success:function(data){
				var roles = data.roles;
				var userRole = "";
				for(var i=0 ;i< roles.length; i++){
					var role = roles[i];
					if(role.userIsRole == 1){
						userRole +="<option value='"+role.id+"' selected= selected>"+role.roleName+"</option>";
					}else{
						userRole +="<option value='"+role.id+"'>"+role.roleName+"</option>";						
					}
				}
				$("#userRole").html(userRole);
				$("#userRoleModal").modal('show');
			}
		});
	}
	
	//获取用户信息同时将获取的信息设置到表单中 
	function getUserInfo(userId){
		$.ajax({
			url:"${ctx}/user/getUserInfo.do",
			type:"post",
			data:{"userId":userId},
			aysnc:"false",
			success:function(data){
				var code = data.code;
				if(code == 200){
					var user = data.user;
					//设置表单中的信息
					$("#userId").val(user.id);
					$("#userName").val(user.userName);
					$("#mail").val(user.mail);
					$("#address").val(user.address);
					$("#realName").val(user.realName);
					$("#phone").val(user.phone);
					/* $("#password").val(user.password); */
					$("#userType").val(user.userType);
				}else{
					$("#message").html("获取用户信息失败");
					$("#alertMessage").modal('show');
				}
			}
		});
		
	}
</script>
